<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>易渔</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link rel="icon" href="assets/logo/logo.png">
    <link rel="stylesheet" href="./css/cssChild/forumInfoCss.css">
</head>

<body class="bg-gray-50">
    <div id="particles-js"></div>

    <main class="container mx-auto px-4 py-6">
        <!-- 主视图容器 -->
        <div id="mainView" class="hidden">
            <div class="mb-8">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">热门板块</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 forum-grid">
                    <!-- 板块卡片将在这里生成 -->
                </div>
            </div>

            <div>
                <h2 class="text-3xl font-bold text-gray-800 mb-4">推荐板块</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 forum-grid">
                    <!-- 推荐板块将在这里生成 -->
                </div>
            </div>
        </div>

        <!-- 板块内容视图容器 -->
        <div id="forumContentView">
            <div class="mb-6 flex items-center">
                <button id="backToForums" class="back-button flex items-center text-blue-600 mr-4">
                    <i class="fas fa-arrow-left mr-2"></i> 返回板块列表
                </button>

                <nav class="breadcrumb">
                    <div class="flex items-center">
                        <span class="breadcrumb-item text-gray-600">首页</span>
                        <span class="breadcrumb-item text-gray-600">板块</span>
                        <span class="breadcrumb-item text-blue-600 font-medium" id="currentForumName">淡水钓鱼</span>
                    </div>
                </nav>
            </div>

            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
                <div class="p-6">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h1 id="forumTitle" class="text-2xl font-bold text-gray-800 mb-2">淡水钓鱼</h1>
                            <p id="forumDescription" class="text-gray-600">交流各种淡水鱼类钓法和技巧，包括鲫鱼、鲤鱼、草鱼等淡水鱼种的钓法分享。</p>
                        </div>
                        <div class="text-right">
                            <div class="text-gray-500 mb-1"><i class="fas fa-eye mr-1"></i> <span
                                    id="forumViews">25.6k</span> 浏览</div>
                            <div class="text-gray-500"><i class="fas fa-comments mr-1"></i> <span
                                    id="forumTopics">312</span> 主题</div>
                        </div>
                    </div>

                    <div class="flex space-x-2 mt-4">
                        <button id="createPostBtn"  
                            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center">
                            <i class="fas fa-plus mr-2"></i> 发新帖
                        </button>
                        <button
                            class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg transition-colors flex items-center">
                            <i class="fas fa-thumbtack mr-2"></i> 精华帖
                        </button>
                        <button
                            class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg transition-colors flex items-center">
                            <i class="fas fa-sort mr-2"></i> 排序
                        </button>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-gray-800">所有主题</h2>
                    <div class="flex space-x-2">
                        <span class="text-gray-500">排序：</span>
                        <a href="#" class="text-blue-600 font-medium">最新</a>
                        <a href="#" class="text-gray-600">最热</a>
                        <a href="#" class="text-gray-600">精华</a>
                    </div>
                </div>

                <div id="topicsList" class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
                    <!-- 话题列表将在这里生成 -->
                </div>

                <div class="flex justify-center mt-8">
                    <nav class="flex items-center space-x-1">
                        <a href="#" class="px-3 py-2 rounded-md bg-blue-600 text-white">1</a>
                        <a href="#" class="px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100">2</a>
                        <a href="#" class="px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100">3</a>
                        <span class="px-3 py-2 text-gray-600">...</span>
                        <a href="#" class="px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100">12</a>
                    </nav>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8 mt-12 relative z-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h4 class="text-lg font-bold mb-4">关于我们</h4>
                    <p class="text-gray-400">钓鱼天堂是一个致力于为钓鱼爱好者提供交流平台和专业装备的综合性网站。</p>
                </div>
                <div>
                    <h4 class="text-lg font-bold mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="index.html" class="hover:text-white transition">首页</a></li>
                        <li><a href="forum.html" class="hover:text-white transition">论坛</a></li>
                        <li><a href="mall.html" class="hover:text-white transition">商城</a></li>
                        <li><a href="auth.html" class="hover:text-white transition">注册/登录</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-bold mb-4">联系我们</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><i class="fas fa-envelope mr-2"></i> contact@fishingheaven.com</li>
                        <li><i class="fas fa-phone mr-2"></i> 400-123-4567</li>
                        <li><i class="fas fa-map-marker-alt mr-2"></i> 渔乐路88号钓鱼天堂大厦</li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-bold mb-4">关注我们</h4>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i
                                class="fab fa-weixin"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i
                                class="fab fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i
                                class="fab fa-qq"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i
                                class="fab fa-tiktok"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
                <p>&copy; 2025 钓鱼天堂 版权所有 | 钓友们的网上家园</p>
            </div>
        </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
    <script src="js/forum.js"></script>
    <script type="module" src="./js/childJS/forumInfo.js"></script>
</body>

</html>